<ui:composition template="../template/plantilla_01.xhtml"
        xmlns:ui="http://java.sun.com/jsf/facelets"
        xmlns:h="http://java.sun.com/jsf/html"
        xmlns:f="http://java.sun.com/jsf/core"
        xmlns:p="http://primefaces.org/ui"
        xmlns:c="http://java.sun.com/jsp/jstl/core"
        xmlns:fn="http://java.sun.com/jsp/jstl/functions" >

    <f:metadata>
        <f:viewParam name="productoBuscar" value="#{catalogoBean.productId}"/>
        <f:event type="preRenderView" listener="#{catalogoBean.cargarProducto}" />
    </f:metadata>

    <ui:define name="head">

        <h:outputStylesheet library="css" name="principalPool.css"/>
        <h:outputStylesheet library="css" name="catalogo.css"/>
        <h:outputStylesheet library="css" name="tooltip.css"/>
        <h:outputStylesheet library="css" name="jquery.countdown.css"/>

        <script language="javascript" src="#{request.contextPath}/resources/js/jquery.countdown.js" />
        <script language="javascript" src="#{request.contextPath}/resources/js/jquery.countdown-es.js" />

        <h:outputStylesheet library="css" name="js-image-slider.css"/>
        <h:outputScript library="js" name="mcVideoPlugin.js" />
        <h:outputScript library="js" name="js-image-slider.js" />        
        
    </ui:define>

    <ui:define name ="panelCentral" >

        <h:form>
            <p:panel style="height: 110px;"  >
                <ui:include src="../pool/bannerPool.xhtml" />
            </p:panel>
            <p:spacer height="5"/>
        </h:form>       

        <!-- banner catálogo -->
        <h:form rendered="#{(aplicacionBean.parametro.muestraBannerEnCatalogo == 'S') and (usuarioSessionBean.estaRegistrado)}" >

            <div id="sliderFrame">
               <div id="slider">

                  <ui:repeat value="#{aplicacionBean.banner}" var="b" >

                      <!-- tipo banner información -->
                      <h:commandLink action="#{aplicacionBean.navegar(b.link)}" immediate="true"
                                     rendered="#{b.tipoBanner == 'IN'}" >
                        <p:graphicImage value="#{b.pathImagen}"  />
                      </h:commandLink>

                      <!-- tipo banner promoción -->
                      <h:commandLink action="#{promocionBean.seleccionarPromocion(b.promocion)}" immediate="true"
                                     rendered="#{b.tipoBanner == 'PR' and b.promocion.activa}" >
                        <p:graphicImage value="#{b.pathImagen}"  />
                      </h:commandLink>

                      <!-- tipo banner pool -->
                      <h:outputLink value="#{application.contextPath}/reserva-venta-especial/#{b.pool.codigoAcceso}"
                                  rendered="#{b.tipoBanner == 'PO' and b.pool.activa and b.activo eq 'S' and b.debaja eq 'N'}"  >
                        <p:graphicImage value="#{b.pathImagen}" styleClass="imgBanner" />
                    </h:outputLink>

                </ui:repeat>
               </div>
            </div>

        </h:form>
        
        <!-- banner catálogo -->

        <h:form id="formulario" prependId="false" target="_blank" >

            <p:growl showDetail="true" id="gCatalogo" />            
            <p:spacer height="5" width="900"/>
            <p:toolbar>
                <p:toolbarGroup align="left">
                    <div style="width: 200px; height: 100%; position: relative; float: left; top: 5px; margin-left: 5px;">
                        <ui:include src="../template/ajaxStatus-I.xhtml" />
                    </div>
                </p:toolbarGroup>

                <p:toolbarGroup align="right">
                    <h:outputText value="Buscar: " />
                    <p:inputText id="txtBusqueda" value="#{catalogoBean.txtDescripcion}" size="25" style="min-width: 211px;"                                 />
                    <p:commandButton value="Buscar" icon="find16" actionListener="#{catalogoBean.verProductos}" process="@this,txtBusqueda" update="@form" />
                    <p:commandButton value="Limpiar filtros" icon="clean16" actionListener="#{catalogoBean.limpiarFiltros}" process="@this" update="@form" />
                    <p:watermark for="txtBusqueda" value="Ingrese texto a buscar" />
                    <p:tooltip for="txtBusqueda" >

                        <div style="width: 400px;"  >
                            <strong>Buscador de productos</strong>
                            <p>
                                Ingrese palabra a buscar.
                                La tienda virtual le devolverá coincidencias con códigos de productos,
                                descripciones, tipos de productos, subtipos y marcas.
                            </p>
                        </div>
                            
                    </p:tooltip>                   
                </p:toolbarGroup> 
            </p:toolbar>

            <p:spacer height="5" width="900"/>

            <div class="panelIzquierdo" >
                
                <h:panelGroup rendered="#{not empty catalogoBean.tiposProductos}" 
                              style="vertical-align: middle; " >

                    <div id="j_idt156_header"
                         class="ui-panel-titlebar ui-widget-header ui-helper-clearfix ui-corner-all"
                         style="height: 20px; vertical-align: middle;">

                        <div style="width: 100%; vertical-align: middle; margin-top: 3px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;" align="center">
                            Tipos de producto
                        </div>                        
                    </div>

                    <p:selectOneListbox id="tipoProducto" value="#{catalogoBean.tipoProducto}" 
                                        style="width: 180px;"
                                         converter="#{conversorBean.conversorTipoProducto}" >

                        <f:selectItems value="#{catalogoBean.tiposProductos}" var="t" itemLabel="#{t.descrp}" itemValue="#{t}"  />

                        <p:ajax listener="#{catalogoBean.verProductosByRubro(true)}" process="@this,subtipo, marca" update="@form"  />

                    </p:selectOneListbox>
                   
                </h:panelGroup>

            </div>

            <div class="panelDerecho" >

                <ui:include src="../inventario/catalogoDetalle.xhtml" />
            </div>

        </h:form>

    </ui:define>

</ui:composition>
